<template>
<div class="mdv-donut-chart">
</div>
</template>

<script>
import * as d3 from 'd3'

export default {
  name: 'MdvDonutChart',
  props: {
    size: {
      type: Object,
      default: function () {
        return {width: 960, height: 500}
      }
    },
    data: {
      type: Array,
      default: function () {
        return [
          {
              label: '内科',
              value: 100
          },
          {
              label: '化验科',
              value: 100
          },
          {
              label: '放射科',
              value: 100
          },
          {
              label: '外科',
              value: 100
          },
          {
              label: 'x射线',
              value: 100
          },
          {
              label: '超声波',
              value: 100
          },
          {
              label: '肛肠科',
              value: 100
          }
        ]
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    radius () {
      return Math.min(this.size.width, this.size.height) / 2
    },
    labels () {
      return this.data.map((item) => {
        return item.label
      })
    },
    colors () {
      return d3.scale.ordinal()
        .domain(this.labels)
        .range(['#ff0000', '#00ff00', '#0000ff', 'pink', 'orange', 'blue', 'yellow'])
    }
  },
  mounted () {
      this.init()
  },
  methods: {
    init () {
      this.$el.style.width = this.size.width
      this.$el.style.height = this.size.height
      let svg = d3.select(this.$el)
        .append('svg')
        .attr('transform', 'translate(' + this.size.width / 2 + ',' + this.size.height / 2 + ')')
      svg.append('g')
        .attr('class', 'slices')
      svg.append('g')
        .attr('class', 'labels')
      svg.append('g')
        .attr('class', 'lines')
    },
    draw () {
      let color = d3.scale.ordinal()
        .domain(this.labels)
        .range(['#ff0000', '#00ff00', '#0000ff', 'pink', 'orange', 'blue', 'yellow'])
      let pie = d3.layout.pie()
        .sort(null)
        .value(function (d) {
          return d.value
        })
      let arc = d3.layout.arc()
        .outerRadius(this.radius * 0.8)
        .innerRadius(this.radius * 0.7)
      let outer = d3.layout.arc()
        .innerRadius(this.radius * 0.9)
        .outerRadius(this.radius * 0.9)

      let slice = svg.select('.slices').selectAll('path.slice')
        .data(pie(this.data), (d) => { return d.data.label })
      slice.enter()
        .insert('path')
        .style('fill', (d) => { return color(d.data.label) })
        .attr('class', 'slice')
      slice..transition().duration(1000)
        .attrTween('d', function(d) {
          this._current = this._current || d
          var interpolate = d3.interpolate(this._current, d)
          this._current = interpolate(0)
          return function(t) {
            return arc(interpolate(t))
          }
        })
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style lang="scss">
.mdv-donut-chart {
  position: relative;
  svg {
    width: 100%;
    height: 100%;
  }
  path.slice{
    stroke-width:2px;
  }
  polyline{
    opacity: .3;
    stroke: black;
    stroke-width: 2px;
    fill: none;
  }
}
</style>
